<template>
  <div class="list-container">
    <div class="header">
      <div class="left">共 {{ songInfoList.total }} 首</div>
      <div class="right">
        <div class="item">
          <n-icon>
            <AppstoreAddOutlined />
          </n-icon>
          添加到歌单
        </div>
        <div class="item" @click="operation('clearList')">
          <n-icon>
            <ClearOutlined />
          </n-icon>
          清空
        </div>
        <div class="item" @click="operation('closePlayList')">
          <n-icon>
            <CloseOutlined />
          </n-icon>
        </div>
      </div>
    </div>

    <div class="empty" v-if="songInfoList.total === 0">
      <n-empty size="large" description="请添加歌曲"></n-empty>
    </div>
    <div class="songList" v-else>
      <div
        class="song"
        @mouseenter="isShowOperation = true"
        @mouseleave="isShowOperation = false"
        v-for="(song, i) in songInfoList.songList"
        :key="i"
        @dblclick="operation('dblclick', song, i)"
      >
        <n-icon class="icon" v-show="song.isPlaying">
          <AimOutlined />
        </n-icon>
        <div class="title" v-html="song.title"></div>
        <div class="author">{{ song.author }}</div>
        <div class="operation" v-show="isShowOperation">
          <n-icon class="icon" @click="operation('deleteSong', song)">
            <DeleteTwotone />
          </n-icon>
          <n-icon class="icon" @click="operation('openLink', song)">
            <LinkOutlined />
          </n-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue';
import { AppstoreAddOutlined, ClearOutlined, CloseOutlined, AimOutlined, DeleteTwotone, LinkOutlined } from '@vicons/antd';

const emits = defineEmits(['closePlayList', 'selectPlaySong', 'clearAudio']);

const isShowOperation = ref(false);
const songInfoList = reactive({
  total: 0,
  songList: [],
});

const getListIntervalID = setInterval(() => {
  songInfoList.songList = localStorage.getObject('playingList');
  songInfoList.total = songInfoList.songList.length;
}, 1000);

onUnmounted(() => {
  clearInterval(getListIntervalID);
});

function operation(operate, song, i) {
  switch (operate) {
    case 'clearList':
      localStorage.setObject('playingList', []);
      songInfoList.total = 0;
      emits('clearAudio');
      break;
    case 'closePlayList':
      emits('closePlayList');
      break;
    case 'openLink':
      if (song.platform === 'bili') {
        window.Operation.openLink(song.link);
      }
      break;
    case 'deleteSong':
      songInfoList.songList = songInfoList.songList.filter((item) => {
        return item.id !== song.id;
      });
      localStorage.setObject('playingList', songInfoList.songList);
      break;
    case 'dblclick':
      emits('selectPlaySong', i);
      break;
  }
}
</script>

<style lang="scss" scoped>
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-container {
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 150px;
  width: 400px;
  height: 420px;
  padding: 20px;
  border-radius: 30px;
  background-color: #f3faf6;
  box-shadow: 19px 19px 38px #cccccc, -19px -19px 38px #f4f4f4;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid rgb(143, 129, 129);
    border-top-left-radius: 30px;
    clip-path: inset(0 50% 50% 0);
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid rgb(143, 129, 129);
    border-bottom-right-radius: 30px;
    clip-path: inset(50% 0 0 50%);
  }
  .empty {
    @include center();
    height: 100%;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    .left {
      font-size: 18px;
      font-weight: 700;
    }
    .right {
      @include center();
      .item {
        @include center();
        margin-right: 10px;
      }
    }
  }

  .songList {
    overflow: auto;
    height: 360px;
    padding: 15px 0;
    .song {
      display: flex;
      justify-content: space-between;
      padding: 6px 3px 6px 7px;
      border-radius: 3px;
      &:hover {
        background-color: #fafafc;
      }
      .icon {
        margin-right: 3px;
        font-size: 20px;
        &:hover {
          color: #258cfc;
        }
      }
      .title {
        width: 47%;
        color: #2c2c2c;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .author {
        width: 45%;
        color: #737373;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .operation {
        display: flex;
      }
    }
  }
}
</style>
